<template>
  <div class="client-add">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="base-info">
      <TitleBox title="基本消息"></TitleBox>
      <div class="base-info-header">
        <a-form
          style="width: 60%"
          :model="taskData"
          auto-label-width
          label-align="right"
        >
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="关联采购入库单号:"
                ><a-input disabled v-model="form.entryNumber"
              /></a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="物料编码:">
                <a-input disabled v-model="form.productNumber" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="物料名称:"
                ><a-input
                  disabled
                  v-model="form.productName"
                  placeholder=""
                  allow-clear
              /></a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="规格型号:"
                ><a-input
                  placeholder="Please enter something"
                  v-model="form.spec"
                  disabled
                  allow-clear
              /></a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="已入库数量:">
                <a-input v-model="form.amount" disabled allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="已上架数量:">
                <a-input
                  v-model="form.receivedAmount"
                  placeholder="Please enter something"
                  disabled
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="暂存区域:">
                <a-typography-text v-if="form.state === 3" type="primary">
                  上架中
                </a-typography-text>
                <a-typography-text v-if="form.state === 4" type="success">
                  上架完成
                </a-typography-text>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- <TitleBox title="质检与入库信息"></TitleBox>
      <div class="base-info-header">
        <a-form style="width: 60%" :model="taskData" auto-label-width>
          <a-row :gutter="24" justify="space-between">
            <a-col :span="11">
              <a-form-item field="posts.post2" label="关联采购入库单号:"
                ><a-input
                  v-model="form.inspectionStaffName"
                  placeholder="Please enter something"
                  disabled
                  allow-clear
              /></a-form-item>
            </a-col>
            <a-col :span="11">
              <a-form-item field="posts.post2" label="物料编码：">
                <a-input
                  v-model="form.warehouseStaffName"
                  placeholder="Please enter something"
                  disabled
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div> -->
      <TitleBox title="采购明细："></TitleBox>
      <div class="base-info-header">
        <tableTurn
          style="padding: 0 50px"
          :table-data="getProduct"
          ref="tableRef"
          :pagination="false"
          :args="args"
        >
          <a-table-column align="center" :width="80" title="条码">
            <template #cell="{ record }">
              <div style="padding: 10px">
                <QRcode
                  ref="qrcode"
                  :qr-url="`${record.content}`"
                  :qr-text="`${record.content}`"
                /> </div
            ></template>
          </a-table-column>
          <a-table-column
            align="center"
            :width="80"
            title="条码编号"
            data-index="content"
          >
          </a-table-column>
          <a-table-column
            align="center"
            :width="80"
            title="总需上架量"
            data-index="amount"
          >
          </a-table-column>

          <a-table-column
            align="center"
            :width="80"
            title="状态"
            data-index="locationName"
          >
            <template #cell="{ record }">
              <a-typography-text v-if="record.entryState !== 4" type="primary">
                待上架
              </a-typography-text>
              <a-typography-text v-else type="success">
                已上架
              </a-typography-text>
            </template>
          </a-table-column>
        </tableTurn>
      </div>
    </div>
  </div>
  <SelectedPosition
    v-if="modelVisible"
    v-model:visible="modelVisible"
    :productName="productName"
    @selectLocationEdit="selectLocationEdit"
  ></SelectedPosition>
  <selectedEntryAmount v-model:visible="modelVisibleS"></selectedEntryAmount>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    watchEffect,
    nextTick,
    defineAsyncComponent,
  } from 'vue';
  import { useRoute } from 'vue-router';
  import {
    getPurchaseOrderList,
    getSinglePurchaseOrder,
  } from '@/api/buy-management/buy-order/index';
  import {
    GetPersonnelinformation,
    Getsingleperson,
  } from '@/api/home/System settings/personal-information/index';
  import { getWarehouseEntrySingle } from '@/api/inventory-management/warehousing-management/receiving-management/index';
  import {
    postWarehouseGrounding,
    getWarehouseGrounding,
  } from '@/api/inventory-management/warehousing-management/purchase-receipt/index';
  import { getBarcode, getProductAndBarcode } from '@/api/barcode';
  import { cloneDeep } from 'lodash';
  // import SelectedPosition from './selected-position/index.vue';
  let SelectedPosition = defineAsyncComponent(
    () => import('./selected-position/index.vue')
  );
  let selectedEntryAmount = defineAsyncComponent(
    () => import('./selected-entry-amount/index.vue')
  );

  const route = useRoute();
  const id = Number(route.query.id);
  const productName = ref();
  const modelVisible = ref(false);
  const modelVisibleS = ref(false);
  // 获取人员信息
  const Personne = ref();
  const Personnelinformation = async () => {
    const res = await GetPersonnelinformation({ page: 0, size: -1 });
    Personne.value = res.content.data;
  };
  Personnelinformation();

  const tableRef = ref();
  const title: string = '物料上架详情';
  const breadCrumb: string[] = [
    '库存管理',
    '入库管理',
    '采购入库',
    '物料上架详情',
  ];

  const form = ref<any>({
    storageWarehouseItemDetails: [{ name: '22', id: 1 }],
  });

  // const getQrcodeList = ref();
  // const getQrcodeData = async () => {
  //   const res = await getProductAndBarcode({
  //     orderNumber: form.value.purchaseOrderNumber,
  //     state: 2,
  //   });
  //   getQrcodeList.value = res;
  // };

  const getData = async () => {
    const res = await getWarehouseGrounding({ id });
    form.value = res;
    tableRef.value.loadData();
    // getQrcodeData();
  };
  getData();

  // 表格配置
  const args = reactive({
    stripe: false,
    scroll: {
      y: 400,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  let taskData = reactive<any>({
    form: {},
  });

  const getProduct = async () => {
    try {
      return Promise.resolve(form.value.barcodes);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const BuyOrderList = ref();
  const getBuyOrderList = async () => {
    const res = await getPurchaseOrderList({ page: 1, size: -1 });
    BuyOrderList.value = res.content;
  };
  getBuyOrderList();
  const isSelectSupplier = ref(false);

  const getUserInfo = async (id: any) => {
    const res = await Getsingleperson({ id });
    form.value.StaffPhone = res.mobile;
  };

  // const addDetails = (record: any) => {
  //   // record.d;
  //   record.entryWarehouseItemDetails.push({
  //     itemId: record.id,
  //     amount: undefined,
  //     locationId: undefined,
  //     state: undefined,
  //   });
  // };

  const delDetails = (record: any, index: number) => {
    record.entryWarehouseItemDetails.splice(index, 1);
  };

  // const fatherIndex = ref();
  // const sonIndex = ref();
  // const selectedLocation = (rowIndex: number, index: number, val: any) => {
  //   productName.value = val.productName;
  //   fatherIndex.value = rowIndex;
  //   sonIndex.value = index;
  //   modelVisible.value = true;
  // };

  // const selectLocationEdit = (data: any) => {
  //   form.value.purchaseOrderProduct[
  //     fatherIndex.value
  //   ].entryWarehouseItemDetails[sonIndex.value].locationId = data.locationId;
  //   form.value.purchaseOrderProduct[
  //     fatherIndex.value
  //   ].entryWarehouseItemDetails[sonIndex.value].locationName =
  //     data.locationName;
  //   tableRef.value.loadData();
  // };

  // const ConfirmListing = async () => {
  //   // let details = form.value.purchaseOrderProduct;
  //   await postWarehouseGrounding({
  //     details: form.value.purchaseOrderProduct[0].entryWarehouseItemDetails,
  //   });
  // };

  // nextTick(() => {
  //   if (form.value.storageWarehouseItemDetails) {
  //     tableRef.value.loadData();
  //   }
  // });
</script>

<style scoped lang="less">
  .client-add {
    .base-info {
      padding: 10px 40px 10px 40px;

      .avatar {
        position: absolute;
        width: 100px;
      }
      &-header {
        // padding: 0 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // :deep(.arco-form-item-content-flex) {
        //   display: block;
        //   line-height: 32px;
        //   color: #cccccc29;
        // }
      }

      &-extra {
        .contact-info,
        .invoice-info,
        .client-info,
        .remarks-info {
          padding: 0 100px;
        }
      }
    }
  }
</style>
